<template>
  <!-- 保持模板结构不变 -->
  <div class="login-container">
    <form @submit.prevent="handleLogin" class="login-form">
      <h2>线上鲜花销售管理平台</h2>
      <div class="form-group">
        <label>账号：</label>
        <input
          type="text"
          v-model="username"
          placeholder="请输入管理员账号"
          required
        />
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input
          type="password"
          v-model="password"
          placeholder="请输入登录密码"
          required
        />
      </div>
      <button type="submit" class="login-btn">花香登录 🌸</button>
    </form>
  </div>
</template>

<script setup>
/* 保持脚本逻辑不变 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const username = ref('fit')
const password = ref('123456')
const router = useRouter()

const handleLogin = () => {
  if (username.value === 'fit' && password.value === '123456') {
    ElMessage.success('登录成功！欢迎回来，花艺师！')
    router.push('/home/page1')
  } else {
    ElMessage.error('账号或密码错误！')
    username.value = ''
    password.value = ''
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2)
    ),
    url("../../assets/2.png"); /* 建议更换为鲜花背景图 */
  background-size: cover;
  background-position: center;
  font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
}

.login-form {
  background: rgba(240, 255, 240, 0.4); /* 蜜露绿底色 */
  padding: 2.5rem;
  border-radius: 25px;
  box-shadow: 0 8px 32px rgba(152, 251, 152, 0.15); /* 浅绿色阴影 */
  width: 380px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(144, 238, 144, 0.3); /* 亮绿色边框 */
  transform: translateY(-10px);
}

h2 {
  text-align: center;
  color: #2e8b57; /* 深海洋绿主标题 */
  margin-bottom: 2rem;
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(46, 139, 87, 0.1);
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #90ee90; /* 亮绿色装饰线 */
  border-radius: 2px;
}

.form-group {
  margin-bottom: 1.8rem;
}

label {
  display: block;
  margin-bottom: 0.8rem;
  color: #228b22; /* 森林绿标签 */
  font-weight: 600;
  font-size: 15px;
}

input {
  width: 100%;
  padding: 14px;
  border: 2px solid #98fb98; /* 薄荷绿边框 */
  border-radius: 12px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: #006400; /* 深绿色文字 */
}

input:focus {
  border-color: #3cb371; /* 中海洋绿焦点色 */
  box-shadow: 0 0 12px rgba(60, 179, 113, 0.2);
  background: rgba(255, 255, 255, 1);
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #3cb371, #20b2aa); /* 绿松石渐变 */
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  transition: 
    transform 0.2s ease,
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  margin-top: 10px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(60, 179, 113, 0.25),
    0 4px 12px rgba(32, 178, 170, 0.2);
  opacity: 0.95;
}

.login-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 3px 10px rgba(60, 179, 113, 0.2),
    0 2px 6px rgba(32, 178, 170, 0.15);
}

.login-btn::after {
  content: '🌼'; /* 花朵图标替代箭头 */
  margin-left: 8px;
  opacity: 0.8;
  transition: margin-left 0.3s ease;
}

.login-btn:hover::after {
  margin-left: 12px;
}
</style>